<template>
	<view class="wrap">
		<van-tabs v-model:active="active" title-active-color="#fe9b23" color="#fe9b23">
			<van-tab title="全部">
				<view class="item" v-for="v in wpay">
					<view class="top">
						<img :src="v.productImg" alt="">
						<view class="right">
							<text>{{v.productName}}</text>
							<view class="one">
								<text>￥{{v.productPrice}}</text>
								<text>x{{v.productNum}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btn1">
							<text>取消订单</text>
						</view>
						<view class="btn2">
							<text>去支付</text>
						</view>
					</view>
				</view>
				<view class="item" v-for="v in wsend">
					<view class="top">
						<img :src="v.productImg" alt="">
						<view class="right">
							<text>{{v.productName}}</text>
							<view class="one">
								<text>￥{{v.productPrice}}</text>
								<text>x{{v.productNum}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btn1">
							<text>取消订单</text>
						</view>
						<view class="btn2">
							<text>催发货</text>
						</view>
					</view>
				</view>
				<view class="item" v-for="v in wget">
					<view class="top">
						<img :src="v.productImg" alt="">
						<view class="right">
							<text>{{v.productName}}</text>
							<view class="one">
								<text>￥{{v.productPrice}}</text>
								<text>x{{v.productNum}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btn1">
							<text>取消订单</text>
						</view>
						<view class="btn2">
							<text>查看物流</text>
						</view>
					</view>
				</view>
				<view class="item" v-for="v in wscore">
					<view class="top">
						<img :src="v.productImg" alt="">
						<view class="right">
							<text>{{v.productName}}</text>
							<view class="one">
								<text>￥{{v.productPrice}}</text>
								<text>x{{v.productNum}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btn1">
							<text>确认订单</text>
						</view>
						<view class="btn2">
							<text>去评价</text>
						</view>
					</view>
				</view>
			</van-tab>
			<van-tab title="待付款">
				<view class="item" v-for="v in wpay">
					<view class="top">
						<img :src="v.productImg" alt="">
						<view class="right">
							<text>{{v.productName}}</text>
							<view class="one">
								<text>￥{{v.productPrice}}</text>
								<text>x{{v.productNum}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btn1">
							<text>取消订单</text>
						</view>
						<view class="btn2">
							<text>去支付</text>
						</view>
					</view>
				</view>

			</van-tab>
			<van-tab title="待发货">
				<view class="item" v-for="v in wsend">
					<view class="top">
						<img :src="v.productImg" alt="">
						<view class="right">
							<text>{{v.productName}}</text>
							<view class="one">
								<text>￥{{v.productPrice}}</text>
								<text>x{{v.productNum}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btn1">
							<text>取消订单</text>
						</view>
						<view class="btn2">
							<text>催发货</text>
						</view>
					</view>
				</view>

			</van-tab>
			<van-tab title="待收货">
				<view class="item" v-for="v in wget">
					<view class="top">
						<img :src="v.productImg" alt="">
						<view class="right">
							<text>{{v.productName}}</text>
							<view class="one">
								<text>￥{{v.productPrice}}</text>
								<text>x{{v.productNum}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btn1">
							<text>取消订单</text>
						</view>
						<view class="btn2">
							<text>查看物流</text>
						</view>
					</view>
				</view>

			</van-tab>
			<van-tab title="待评价">
				<view class="item" v-for="v in wscore">
					<view class="top">
						<img :src="v.productImg" alt="">
						<view class="right">
							<text>{{v.productName}}</text>
							<view class="one">
								<text>￥{{v.productPrice}}</text>
								<text>x{{v.productNum}}</text>
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="btn1">
							<text>确认订单</text>
						</view>
						<view class="btn2">
							<text>去评价</text>
						</view>
					</view>
				</view>

			</van-tab>
		</van-tabs>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import $http from '../../request/index.js'
	import {
		onShow
	} from '@dcloudio/uni-app'

	let active = ref('全部')

	let wall = ref([]) //全部
	let wpay = ref([]) //待付款
	let wsend = ref([]) //待发货
	let wget = ref([]) //待收货
	let wscore = ref([]) //待评价

	onShow(() => {
		$http.get('/user/myorder').then(res => { //得到所有的订单列表
			console.log(res)
			wall.value = res.data
			wpay.value = res.data.filter(i => i.orderState == 0)
			wsend.value = res.data.filter(i => i.orderState == 1)
			wget.value = res.data.filter(i => i.orderState == 2)
			wscore.value = res.data.filter(i => i.orderState == 3)
		})
	})
</script>

<style scoped>
	.wrap {
		background-color: #f7f7f7;
		width: 100vw;
		height: calc(100vh - 44px);
		overflow-y: scroll;
	}

	.top img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
	}

	.top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 30rpx 20rpx 30rpx;
		box-sizing: border-box;
	}

	.top .right {
		width: 470rpx;
		height: 160rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.one {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item {
		background-color: #fff;
		/* padding: 30rpx; */
		box-sizing: border-box;
		margin: 20rpx 20rpx;
		border-radius: 30rpx;
	}

	.bottom {
		padding: 20rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		border-top: 1px solid grey;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.btn1 {
		border: 1px solid grey;
		border-radius: 40rpx;
		padding: 0 20rpx;
		margin-left: 300rpx;
	}

	.btn2 {
		border: 1px solid #Fe9b23;
		background-color: #Fe9b23;
		border-radius: 40rpx;
		padding: 0 20rpx;
		color: #fff;
	}
</style>